
<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>Booking Seats</title>
<link rel="stylesheet"
	href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />

<style>
#feedback {
	font-size: 1.4em;
}

#selectable .ui-selecting {
	background: #FEC40;
}

#selectable .ui-selected {
	background: #F39814;
	color: white;
}

#selectable {
	list-style-type: none;
	margin: 0;
	padding: 0;
	width: 60%;
	position: relative;
}

#selectable li {
	margin: 3px;
	padding: 1px;
	float: left;
	width: 15px;
	height: 15px;
	font-size: .5em;
	text-align: center;
}

#selectable img {
	width: 15px;
	height: 15px;
	float: left;
}
</style>
<script>
	$(function() {
		$("#selectable").selectable({
			stop : function() {
				var result = $("#select-result").empty();
				$(".ui-selected", this).each(function() {
					var index = $("#selectable li").index(this);
					result.append(" #" + (index + 1));
				});
			}
		});
	});
</script>
</head>
<body>
	<ol id="selectable">
		<li class="ui-widget-content"><img src="Images/seat.jpg"></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg"></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg" /></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg" /></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg" /></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg" /></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg" /></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg" /></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg" /></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg" /></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg" /></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg" /></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg" /></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg" /></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg" /></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg" /></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg" /></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg" /></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg" /></li>
		<li class="ui-widget-content"><img src="Images/seat.jpg" /></li>
		<br></br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<li class="ui-widget-content">B1</li>
		<li class="ui-widget-content">B2</li>
		<li class="ui-widget-content">B3</li>
		<li class="ui-widget-content">B4</li>
		<li class="ui-widget-content">B5</li>
		<li class="ui-widget-content">B6</li>
		<li class="ui-widget-content">B7</li>
		<li class="ui-widget-content">B8</li>
		<li class="ui-widget-content">B9</li>
		<li class="ui-widget-content">B10</li>
		<li class="ui-widget-content">B11</li>
		<li class="ui-widget-content">B12</li>
		<li class="ui-widget-content">B13</li>
		<li class="ui-widget-content">B14</li>
		<li class="ui-widget-content">B15</li>
		<br></br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<li class="ui-widget-content">C1</li>
		<li class="ui-widget-content">C2</li>
		<li class="ui-widget-content">C3</li>
		<li class="ui-widget-content">C4</li>
		<li class="ui-widget-content">C5</li>
		<li class="ui-widget-content">C6</li>
		<li class="ui-widget-content">C7</li>
		<li class="ui-widget-content">C8</li>
		<li class="ui-widget-content">C9</li>
		<li class="ui-widget-content">C10</li>
		<li class="ui-widget-content">C11</li>
		<li class="ui-widget-content">C12</li>
		<li class="ui-widget-content">C13</li>
		<li class="ui-widget-content">C14</li>
		<li class="ui-widget-content">C15</li>
		<br></br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<li class="ui-widget-content">D1</li>
		<li class="ui-widget-content">D2</li>
		<li class="ui-widget-content">D3</li>
		<li class="ui-widget-content">D4</li>
		<li class="ui-widget-content">D5</li>
		<li class="ui-widget-content">D6</li>
		<li class="ui-widget-content">D7</li>
		<li class="ui-widget-content">D8</li>
		<li class="ui-widget-content">D9</li>
		<li class="ui-widget-content">D10</li>
		<li class="ui-widget-content">D11</li>
		<li class="ui-widget-content">D12</li>
		<li class="ui-widget-content">D13</li>
		<li class="ui-widget-content">D14</li>
		<li class="ui-widget-content">D15</li>
		<br></br>
		<li class="ui-widget-content">E1</li>
		<li class="ui-widget-content">E2</li>
		<li class="ui-widget-content">E3</li>
		<li class="ui-widget-content">E4</li>
		<li class="ui-widget-content">E5</li>
		<li class="ui-widget-content">E6</li>
		<li class="ui-widget-content">E7</li>
		<li class="ui-widget-content">E8</li>
		<li class="ui-widget-content">E9</li>
		<li class="ui-widget-content">E10</li>
		<li class="ui-widget-content">E11</li>
		<li class="ui-widget-content">E12</li>
		<li class="ui-widget-content">E13</li>
		<li class="ui-widget-content">E14</li>
		<li class="ui-widget-content">E15</li>
		<br></br>
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		<li class="ui-widget-content">F1</li>
		<li class="ui-widget-content">F2</li>
		<li class="ui-widget-content">F3</li>
		<li class="ui-widget-content">F4</li>
		<li class="ui-widget-content">F5</li>
		<li class="ui-widget-content">F6</li>
		<li class="ui-widget-content">F7</li>
		<li class="ui-widget-content">F8</li>
		<li class="ui-widget-content">F9</li>
		<li class="ui-widget-content">F10</li>
		<li class="ui-widget-content">F11</li>
		<li class="ui-widget-content">F12</li>
		<li class="ui-widget-content">F13</li>
		<li class="ui-widget-content">F14</li>
		<li class="ui-widget-content">F15</li>
		<br></br>
	</ol>
	<p id="feedback" align="right">
		<span>You've selected:</span> <span id="select-result">none</span>.
	</p>
</body>
</html>
